<template>
  <view class="video-container">
    <view class="mask">
      <text class="ali-icon play-icon" @click="videoPlay">&#xe624;</text>
    </view>
    <!-- <TImage
      v-if="modelValue?.coverUrl"
      :src="modelValue?.coverUrl"
      width="calc(750rpx - 60rpx)"
      height="385rpx"
    /> -->
    <video
      class="video-ctx"
      :id="videoId"
      :src="modelValue?.videoUrl"
      :controls="true"
      :poster="modelValue?.coverUrl"
      :show-fullscreen-btn="false"
      :show-play-btn="true"
      :show-center-play-btn="false"
      :show-bottom-progress="false"
      :vslide-gesture-in-fullscreen="true"
      :picture-in-picture-mode="['push', 'pop']"
      @play="playChange"
      @fullscreenchange="fullscreenchange"
    ></video>
  </view>
</template>

<script setup lang="ts">
  import { buildShortUUID } from '@/utils/uuid';
  import { getCurrentInstance, inject, type PropType, ref } from 'vue';

  interface VideoInfo {
    videoUrl?: string;
    coverUrl?: string;
  }

  defineProps({
    modelValue: Object as PropType<VideoInfo>,
  });

  const { proxy }: any = getCurrentInstance();
  const videoId = ref(buildShortUUID('ID'));

  function getVideo() {
    return uni.createVideoContext(videoId.value, proxy);
  }

  function videoPlay() {
    getVideo().play();
  }

  function playChange() {
    getVideo().requestFullScreen({ direction: 0 });
  }

  const isPlayChange = inject<any>('isPlayVideo');
  function fullscreenchange({ detail }: any) {
    isPlayChange?.(detail.fullScreen); // 解决IOS中，scroll-view内视频全屏状态下bug，通知父组件禁止滚动;
    if (!detail.fullScreen) {
      getVideo().pause();
    }
  }
</script>

<style lang="scss" scoped>
  .video-container {
    position: relative;
    height: 385rpx;
    border-radius: 10rpx;
    overflow: hidden;
    .mask {
      position: absolute;
      left: 0;
      top: 0;
      background-color: rgba($color: #000000, $alpha: 0.5);
      width: 100%;
      height: 100%;
      z-index: 1;
      display: flex;
      align-items: center;
      justify-content: center;
      .play-icon {
        color: #fff;
        font-size: 96rpx;
      }
    }

    .video-ctx {
      width: 100%;
      height: 100%;
      // position: absolute;
      // left: -2000rpx;
    }
  }
</style>
